<template>
    <div>
        <div class="box">


            <!-- 筛选查询 -->
            <div class="list">
                <div>
                    <img class="list-img" src="../../../assets/images/搜索小.png" alt="">
                </div>
                <div>
                    筛选查询
                </div>
            </div>
            <div class="search">
                <div class="search">

                    <div style="display: flex;">
                        <div class="whead">
                            <div class="left">水库编号  :</div>
                            <el-input v-model="input" @change="btnchange(input)" style="width: 240px;"
                                placeholder="请输入水库编号">
                            </el-input>
                        </div>
                        <div class="whead">
                            <div class="left">水库名称  :</div>
                            <el-input v-model="city" @change="cityChange(city)" style="width: 240px;"
                                placeholder="请输入水库名称">
                            </el-input>
                        </div>
                        <div class="whead">
                            <div class="left">负责人手机号  :</div>
                            <el-input v-model="principal" @change="principalChange(principal)" style="width: 240px;"
                                placeholder="负责人手机号">
                            </el-input>

                        </div>
                        <div>
                            <el-button type="primary" @click="btnSearch">搜索</el-button>   
                        </div>
                        <div v-permission="['reservoir:info:add']" style="margin-left: 10px;">
                            <el-button type="primary" @click="addEvent">添加水库</el-button>
                        </div>
                    </div>

                    <div style="display: flex;">

                        <div class="whead">
                            <div class="left">水库所在城市  :</div>
                            <el-select v-model="rescity" placeholder="全部" @change="rescityChange(rescity)">
                                <el-option v-for="item in reserData" :key="item.code" :label="item.name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="whead">
                            <div class="left">水库状态  :</div>
                            <el-select v-model="staty" placeholder="全部" @change="statusChange(staty)">
                                <el-option v-for="item in status" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 数据列表 -->
            <div class="lists">
        <div class="list">
          <div>
            <img
              class="list-img"
              src="../../../assets/images/查询数据列表.png"
              alt=""
            />
          </div>
          <div>
            数据列表
          </div>
        </div>
        <div style="margin-right: 20px;">
          <el-button v-on:click="exportBtn()"  type="primary" size="small " class="el-icon-upload">导出数据</el-button>
        </div>
      </div>
            <div>
                <!-- 表格 -->
                <el-table border :data="listData" style="width: 100%" align="center">
                    <el-table-column prop="reservoirNo" label="水库编号" align="center"></el-table-column>
                    <el-table-column prop="img" label="水库照片" align="center" width="150">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" trigger="click">
                                <!--trigger属性值：hover、click、focus 和 manual-->
                                <a :href="scope.row.img" target="_blank" title="查看最大化图片">
                                    <img :src="scope.row.img" style="width: 200px;height: 200px">
                                </a>
                                <img slot="reference" :src="scope.row.img"
                                    style="width: 80px;height: 80px; cursor:pointer">
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="水库名称" align="center"></el-table-column>
                    <el-table-column prop="cityName" label="所在城市" align="center"></el-table-column>
                    <el-table-column prop="addressDetail" label="地址" align="center"></el-table-column>
                    <el-table-column prop="fishPartyTotalNum" label="智能渔方总数" align="center"></el-table-column>
                    <el-table-column prop="fishPartyStockNum" label="待租数" align="center"></el-table-column>
                    <el-table-column label="是否显示" align="center">
                        <template slot-scope="scope" >
                            <el-switch v-model="scope.row.enableStatus" :active-value="0" :inactive-value="1"
                                @change="changeSwitch(scope.row.enableStatus, scope.row.id)">
                            </el-switch>
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" align="center">
                        <template slot-scope="scope">
                            <div class="slot">
                                <el-button @click="handleClick(scope.row.id)" type="primary" size="small">查看</el-button>
                                <el-button v-permission="['reservoir:info:edit']" type="primary" size="small" @click="editClick(scope.row.id)">编辑</el-button>
                                <!-- <el-button v-permission="['reservoir:info:delete']" type="primary" size="small" @click="editClick(scope.row.id)">删除</el-button> -->
                            </div>
                        </template>
                    </el-table-column>

                </el-table>
                <!-- <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%" center>
                    <div class="edit">
                        <div>
                            <el-button class="btn" @click="editbtn">编辑水库信息</el-button>
                        </div>
                        <div class="edit-btn">
                            <el-button type="primary" class="btn" @click="redactFish">编辑鱼苗信息</el-button>

                        </div>
                    </div>

                </el-dialog> -->
                <!-- 分页器 -->
                <div class="block" style="margin-top:15px; ">
                    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" background
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>

    </div>

</template>
 
<script>
import { reservoir, updateStatus, queryList,exportReservoirExcell } from '@/api/user'
export default {
    data() {
        return {
            input: '', //搜索
            phone: '', //手机号搜索
            timeInfo: '', //日期选择
            principal: '', //负责人搜索
            city: '', //城市搜索
            staty: '', //水库状态
            rescity: "",
            loading: false,
            selectedAssetsList: [], // 该数组对象
            assetsUidList: [], // 下标值
            currentPage: 1, //当前页数
            pageSize: 10, //每页条数
            total: 0, //总条目数
            listData: [],
            chargePhone: '', //负责人手机号
            cityCode: '', //水库所在城市
            enableStatus: -1, //启用状态 -1.所有 0.启用 1.禁用
            reservoirName: '', //水库名称
            reservoirNo: '', //水库编号
            formInline: '',
            dialogVisible: false,
            form: {
                code: '',
                name: ''
            },
            value: '',
            options: [],
            reserData: [],
            status: [{
                value: 0,
                label: '启用'
            },
            {
                value: 1,
                label: '禁用'
            }
            ],
            querId:''
        }
    },
    created() {
        this.queryList()
        this.reservoir(this.pageSize, this.currentPage)
    },
    methods: {
         // 导出数据
    async exportBtn() {
      let data = {
        limit: this.pageSize,
                page: this.currentPage,
                chargePhone: this.chargePhone,
                cityCode: this.cityCode,
                enableStatus: this.enableStatus,
                reservoirName: this.reservoirName,
                reservoirNo: this.reservoirNo
      };
      let result = await exportReservoirExcell(data);
      if (result.code == 0) {
        // 下载文件
        window.location.href = process.env.VUE_APP_BASE_API + "/file/export/exportInfo?fileName=" + result.data;
      }
    },
        // 水库列表
        async queryList() {
            let result = await queryList()
            if (result.code == 0) {
                result.data.forEach(element => {
                    this.reserData.push({ name: element.cityName, code: element.cityCode });
                })
            }
        },
     
        async reservoir(limit, page) {
            let data = {
                limit: this.pageSize,
                page: this.currentPage,
                chargePhone: this.chargePhone,
                cityCode: this.cityCode,
                endDate: this.endDate,
                enableStatus: this.enableStatus,
                reservoirName: this.reservoirName,
                reservoirNo: this.reservoirNo
            }
            let result = await reservoir(data)
            if (result.code == 0) {
                this.listData = result.data.records
                this.pageSize = result.data.limit
                this.total = result.data.total
                result.data.records.forEach(element => {
                    this.options.push({ name: element.name, id: element.id });
                })

            }


        },
        // 编辑水库信息
        editbtn(){
            this.dialogVisible = false
            let querId =  this.querId
            this.$router.push({ path: '/redact', query: { querId} })
        },
        // 编辑鱼苗信息
        redactFish(){
            this.dialogVisible = false
            let querId =  this.querId
            this.$router.push({ path: '/redactFish', query: { querId} })
        },        // 编辑按钮
        editClick(e) {
            // this.querId = e
            // this.dialogVisible = !this.dialogVisible
            let querId = e
            this.$router.push({ path: '/redact', query: { querId} })
        },
        // 查看
        handleClick(e) {
            // 水库ID
            let id = e
            this.$router.push({ path: '/reservoirEdit', query: { id } })
        },
        // 更新水库状态
        async changeSwitch(e, id) {
            let data = {
                reservoirId: id,
                status: e

            }
            let result = await updateStatus(data)
      
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.reservoir(this.pageSize, this.currentPage)
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.reservoir(this.pageSize, this.currentPage)
        },
        //  搜索水库编号
        btnchange(e) {
            this.reservoirNo = e
            this.reservoir(this.pageSize, this.currentPage)
        },
        //水库名称
        cityChange(e) {
            this.reservoirName = e
            this.reservoir(this.pageSize, this.currentPage)

        },
        // 负责人手机号
        principalChange(e) {
           
            this.chargePhone = e
            this.reservoir(this.pageSize, this.currentPage)

        },
        // 城市搜索
        rescityChange(e) {
            this.cityCode = e
            this.reservoir(this.pageSize, this.currentPage)
        },
        // 水库状态搜索
        statusChange(e) {
        

            this.enableStatus = e
            this.reservoir(this.pageSize, this.currentPage)
        },
        // 搜索按钮
        btnSearch(e) {
            this.reservoir(this.pageSize, this.currentPage)
        },
        // 跳转到添加水库页面
        addEvent() {
            this.$router.push('addReservoir')
        }
    }

};
</script>

<style lang="scss" scoped>
.lists {
  display: flex;
  align-items: center;
  justify-content: space-between;
//   padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;
}
.left{
    margin-right: 10px;
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: black;
}
::v-deep .el-dialog__header {
    padding: 20px 20px 10px;
    background-color: #cccc;
    color: #000;
    font-weight: 700;
}
.slot {
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-btn {
    margin-top: 50px;
}

.btn {
    background-color: #1abca0;
    color: #ffff;
}

.edit {
    text-align: center;
}

.box {
    border: 1px solid #ccc;
    width: 98%;
    margin: 10px auto;
}

.list {
    display: flex;
    align-items: center;
    padding-left: 20px;
    height: 50px;
    background-color: #f3f3f3;
    color: #666;

    .list-img {
        width: 20px;
        height: 20px;
    }
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1abc9c !important;
    color: #FFF;
}

.search {
    // display: flex;
    align-items: center;
    // height: 80px;
    line-height: 80px;
    margin: 0 20px;

}

.whead {
    width: 400px;
    display: -webkit-box;
}


</style>